<template>
	<view class="putup">
		<view style="height: 250rpx; background: #1365f9">
			<u-navbar bgColor="rgba(0,0,0,0)" :fixed="false">
				<view slot="left">
					<view style="font-weight: 600; font-size: 48rpx; color: #ffffff">住宿基地</view>
				</view>
			</u-navbar>
		</view>
		<view class="flex-center1" style="position: relative; top: -60rpx">
			<view
				style="width: 686rpx; height: 116rpx; padding: 38rpx 44rpx; background: #ffffff; border-radius: 16rpx">
				<view class="align-center">
					<!-- <text style="font-weight: 400; font-size: 28rpx; color: #666666; margin-right: 18rpx">地点</text> -->
					<!-- <u-icon name="arrow-down" :bold="true" size="22"></u-icon> -->
					<text
						style="font-weight: 400; font-size: 28rpx; color: #666666; margin-left: 28rpx; margin-right: 26rpx">|</text>
					<view class="flex-between1" style="flex: 1">
						<input type="text" v-model="name" @confirm="
								list = [];
								init();
							" placeholder="搜索基地" style="font-weight: 400; font-size: 28rpx; color: #666666; flex: 1" />
						<u-icon @click="
								list = [];
								init();
							" name="search" color="#666666" size="43"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 32rpx">
			<custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" @wapperClick="wapperClick"
				@imageClick="wapperClick">
				<!-- 瀑布流的条目 -->
				<view class="item" v-for="(item, index) in list" :key="index" :slot="`slot${index}`">
					<view style="padding: 18rpx">
						<view style="font-weight: 500; font-size: 28rpx; color: #333333; margin-bottom: 14rpx">
							{{ item.name }}
						</view>
						<view class="flex-wrap">
							<view v-for="(item1, index1) in item.feature">
								<view v-if="item1!=='0'" style="
									margin-right: 12rpx;
									margin-bottom: 12rpx;
									font-size: 24rpx;
									color: #feb143;
									padding: 2rpx 8rpx;
									border-radius: 4rpx;
									border: 1rpx solid #feb143;
								" class="">
									{{ item1 }}
								</view>
							</view>
						</view>
						<view class="flex-between1" style="font-weight: 400; font-size: 24rpx; color: #999999">
							<text>剩余铺位: {{ item.surplusCount }}</text>
						</view>
						<view class="flex-between1" style="font-weight: 400; font-size: 24rpx; color: #999999">
							<text>{{ item.address }}</text>
						</view>
					</view>
				</view>
			</custom-waterfalls-flow>
		</view>

		<Tabbar :value="1" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 20,
				isLastPage: false,
				name: ''
			};
		},
		onShow() {
			this.list = [];
			this.init();
		},
		onReachBottom() {
			if (this.isLastPage) return;
			this.pageNum++;
			this.getgw();
		},
		methods: {
			init() {
				this.getzs();
			},
			getzs() {
				this.$request('front/userHome/getList', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					name: this.name
				}).then((res) => {
					res.obj.list.map((item, index) => {
						item.feature = item.feature.split(',');
						item.image = item.image.split(',')[0];
					});
					this.list = [...this.list, ...res.obj.list];
					this.$refs.waterfallsFlowRef.refresh();
					console.log(res.obj.list, '住宿列表');
					this.isLastPage = res.obj.isLastPage;
				});
			},
			async wapperClick(item) {
				console.log('单项点击事件', item);
				this.$tools.navigite('./detail', item.id);
				//刷新
				// this.$refs.waterfallsFlowRef.refresh();
			}
		}
	};
</script>

<style lang="less" scoped>
	.putup {
		min-height: 100vh;
		background: #f5f6fa;
	}

	.waterfall {
		display: flex;
		flex-wrap: wrap;
	}

	/* 根据列数调整 */
	// .waterfall-item {
	// 	width: calc(100% / 3);
	// 	box-sizing: border-box;
	// }

	.waterfall-image {
		width: 100%;
		height: auto;
		display: block;
	}

	.item {
		width: 330rpx;
		margin-bottom: 30rpx;
	}
</style>